<template>
  <div
    class="diy_edit novel_chapters_edits page_i_want_to_customize"
    id="i_want_to_customize_edit"
  >
    <el-form
      :model="form"
      ref="ruleFormRef"
      :rules="rules"
      label-width="auto"
      class="edit_novel_chapters_form"
      size="large"
    >
      <el-form-item label="章节名称" prop="chapter_name">
        <el-input v-model="form.chapter_name" />
      </el-form-item>
      <el-form-item label="章节排序" prop="sort">
        <el-input v-model="form.sort" />
      </el-form-item>
      <el-form-item label="章节内容" prop="chapter_content">
        <form_editor
          class="editor el_form_editor_warp"
          :form="form"
          @blur_comment="blur_comment"
          @update_comment="update_comment"
          :publish_flag="false"
        />
      </el-form-item>
      <div class="footer">
        <el-button type="primary" @click="Onsubmit" size="large"
          >提交</el-button
        >
        <el-button @click="cancel()" size="large">取消</el-button>
      </div>
    </el-form>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { ref, onMounted } from "vue";
import { $post, $get } from "@/api/Api.js";
import storageHelper from "@/libs/StorageHelper";
import { useStore } from "vuex";
import { useRouter,useRoute } from "vue-router";
import {
  $get_auth,
  func,
  paramsFun,
  $fullUrl,
  formatDate,
  $banseUrl,
  $check_action,
  $getUrlParams,
  filterSensitiveWords,
} from "@/utils/utils.js";
let router = useRouter();
let route = useRoute();
let store = useStore();
let token = storageHelper.getToken() || null;
let UserInfo = storageHelper.getUserInfo();
// let avatar = storageHelper.getUserInfo().avatar;
// let nickname = storageHelper.getUserInfo().nickname;
let url_add = ref("/api/novel_chapters/add");
let url_set = ref("/api/novel_chapters/set");
let url_get_obj = ref("/api/novel_chapters/get_obj");
let url_upload = ref("/api/novel_chapters/upload");
let title = ref("novel_chapters");
let field = ref("novel_chapters_id");

let form = ref({
  "chapter_name": '', // 章节名称
  "sort": '', // 排序
  "chapter_content": '', // 章节内容                    
  'source_field':route.query.source_field ,     
  'source_table':route.query.source_table ,     
  // "novel_reading_id": route.query.novel_reading_id,
});

let ruleFormRef = ref(null);
let rules = ref({
  title: [
    {
      required: true,
      message: "标题不能为空",
      trigger: "blur",
    },
  ],
  content: [
    {
      required: true,
      message: "内容不能为空",
      trigger: "blur",
    },
  ],
});

// 富文本编辑器更新
let update_comment = (obj) => {
  form.value.chapter_content = obj;
};
let blur_comment = (obj) => {
  form.value.chapter_content = obj;
};
// 点击取消
let cancel = () => {
  router.go(-1);
};
// 点击提交
let Onsubmit = async () => {
  let valid = await ruleFormRef.value.validate();
  if (valid) {
    if(route.query.novel_reading_id){
      form.value['novel_reading_id'] = route.query.novel_reading_id
    }
    let novel_chapters_id=route.query.novel_chapters_id
    if(novel_chapters_id){
      let {chapter_content,chapter_name,novel_chapters_id,sort,source_field,source_table}=form.value
      let params={
        chapter_content,
        chapter_name,
        novel_chapters_id,
        sort,
        source_field,
        source_table,
      }
		  // 编辑
		  $post(url_set.value+"?novel_chapters_id=" + novel_chapters_id, params).then((res) => {
			  if (res.result) {
			  ruleFormRef.value.resetFields();
			  router.push("./table?novel_reading_id="+route.query.novel_reading_id+'&source_table=customized_products&source_field=customized_products_id');
			  ElMessage.success("提交成功！");
			  } else if (res.error) {
			  ElMessage.error(res.error.message);
			  }
		  });
	   
	  }else{
		  // 新增
		  $post(url_add.value, form.value).then((res) => {
			  if (res.result) {
			  ruleFormRef.value.resetFields();
			  router.push("./table?novel_reading_id="+route.query.novel_reading_id+'&source_table=customized_products&source_field=customized_products_id');
			  ElMessage.success("提交成功！");
			  } else if (res.error) {
			  ElMessage.error(res.error.message);
			  }
		  });
  
	  }
  } else {
    ElMessage.error(msg);
  }
};
// 获取留言详情
let get_novel_chapters_obj = async () => {
  var list = await $get("/api/novel_chapters/get_obj?novel_chapters_id=" + route.query.novel_chapters_id);
  form.value = list.result.obj;
  form.value.content=list.result.obj.chapter_content
};
onMounted(() => {
  if(route.query.novel_chapters_id){
    get_novel_chapters_obj();
  }
  
});
</script>

<style scoped lang="less">
.diy_edit {
  width: 100%;
  .edit_novel_chapters_form {
    max-width: 60%;
    margin: 90px auto;
    .fn {
      width: 100%;
    }
  }
  img {
    width: 100px;
    height: 100px;
  }
  .edit_list_novel_chapters_sell {
    width: 80%;
    margin: 90px auto;
  }
  .footer {
    text-align: center;
  }
}
</style>
